<template>
	<view>
		<u-popup :show="show" :round="10" @close="close">
			<view class="popupTitle">
				<u-search :focus="focus" placeholder="请输入关键字" v-model="searchKey" style="margin: 10rpx 0;"
					@search='search' @clear="clear" @custom='search' actionText="搜索"></u-search>
			</view>
			<view class="popupBody">
				<z-paging :auto='false' ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
					:default-page-no="1" :default-page-size="10">
					<template v-if="loading">
						<view class="userInfoBox" v-for="item in 20" :key="item">
							<view style="height: 100rpx;width: 100rpx;border-radius: 8rpx;" class="Skeleton" />
							<view>
								<view style="height: 30rpx;" class="Skeleton" />
								<view style="height: 30rpx;" class="Skeleton" />
							</view>
						</view>

					</template>
					<template v-else>
						<u-radio-group v-model="radiovalue" placement="column">
							<u-radio  v-for="(item, index) in data" :key="index" :name="item.id">
								<view class="userInfoBox" @click.stop="radiovalue=item.id">
									<u--image :fade='false' :src="item.customer.avatar" width="100rpx" height="100rpx"
										radius='8rpx'></u--image>
									<view>
										<view>
											<u-text :lines='1' size='24rpx' :text='item.remark_name'></u-text>
										</view>
										<view>
											<u-text :lines='1' size='24rpx' :text='item.description'></u-text>
										</view>
									</view>
								</view>
							</u-radio>
						</u-radio-group>
					</template>
				</z-paging>
			</view>
			<view style="margin-top: 10rpx;padding: 0 40rpx;">
				<u-button @click='userBinding' v-if="radiovalue" color="#3975c6">
					确认
				</u-button>
				<u-button @click='userBinding' v-else>
					确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['show','form'],
		data() {
			return {
				focus: false,
				searchKey: '',
				data: [],
				loading: true,
				radiovalue:null
			}
		},
		watch: {
			show() {
				if (!this.data.length && this.show) {
					this.$refs.paging.reload()
					this.radiovalue=null
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			search() {
				this.$refs.paging.reload()
					this.radiovalue=null
			},
			clear() {
				this.focus = false
				setTimeout(() => {
					this.focus = true
				}, 100)
			},
			query(page, size) {
				let obj = {
					page,
					size,
					keywords: this.searchKey
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Decorate.List(obj).then(res => {
					this.$refs.paging.complete(res.data.customers.data)
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.message)
					uni.hideLoading()
				})
			},
			userBinding(){
				if(!this.radiovalue){
					uni.$u.toast('请先选择工地')
					return
				}
				const item = this.data.filter(item=>item.id==this.radiovalue)[0]
				this.$emit('selectCustomer',item)
				this.radiovalue=null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfoBox {
		display: flex;
		margin-bottom: 20rpx;

		width: 100%;
		>view:nth-child(2) {
			margin-left: 10px;
			flex: 1;
			display: flex;
			height: 100rpx;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 1rpx solid #f1f1f1;
			padding: 0 0 10rpx 0;
		}
	}
</style>